<template>


	<view class="z">
		<view class="a">
			<image class="img" src="../../static/dingdan_imgs/jifen.png" mode="" style="height: 310rpx;"></image>
			<view class="au">
				0
			</view>
			<view class="ad">
				积分
			</view>
		</view>
		<van-tabs animated>
			<van-tab title="获取记录">
				<view class="b">
					<view class="blu">
						签到获得
					</view>
					<view class="bld">
						时间:2016-08-2013:30:35
					</view>
					<view class="br">
						+5积分
					</view>
				</view>
				<view class="b">
					<view class="blu">
						签到获得
					</view>
					<view class="bld">
						时间:2016-08-2013:30:35
					</view>
					<view class="br">
						+5积分
					</view>
				</view>
				<view class="b">
					<view class="blu">
						签到获得
					</view>
					<view class="bld">
						时间:2016-08-2013:30:35
					</view>
					<view class="br">
						+5积分
					</view>
				</view>
				<view class="b">
					<view class="blu">
						签到获得
					</view>
					<view class="bld">
						时间:2016-08-2013:30:35
					</view>
					<view class="br">
						+5积分
					</view>
				</view>
				<view class="b">
					<view class="blu">
						签到获得
					</view>
					<view class="bld">
						时间:2016-08-2013:30:35
					</view>
					<view class="br">
						+5积分
					</view>
				</view>
				<view class="b">
					<view class="blu">
						签到获得
					</view>
					<view class="bld">
						时间:2016-08-2013:30:35
					</view>
					<view class="br">
						+5积分
					</view>
				</view>
			</van-tab>
			<van-tab title="使用记录">
				<view class="c">
					<view class="clu">
						订单:291704261137926
					</view>
					<view class="clm">
						抵扣金额:50元
					</view>
					<view class="cld">
						时间:2016-08-2013:30:35
					</view>
					<view class="cr">
						-500积分
					</view>
				</view>
				<view class="c">
					<view class="clu">
						订单:291704261137926
					</view>
					<view class="clm">
						抵扣金额:50元
					</view>
					<view class="cld">
						时间:2016-08-2013:30:35
					</view>
					<view class="cr">
						-500积分
					</view>
				</view>
				<view class="c">
					<view class="clu">
						订单:291704261137926
					</view>
					<view class="clm">
						抵扣金额:50元
					</view>
					<view class="cld">
						时间:2016-08-2013:30:35
					</view>
					<view class="cr">
						-500积分
					</view>
				</view>
				<view class="c">
					<view class="clu">
						订单:291704261137926
					</view>
					<view class="clm">
						抵扣金额:50元
					</view>
					<view class="cld">
						时间:2016-08-2013:30:35
					</view>
					<view class="cr">
						-500积分
					</view>
				</view>
				<view class="c">
					<view class="clu">
						订单:291704261137926
					</view>
					<view class="clm">
						抵扣金额:50元
					</view>
					<view class="cld">
						时间:2016-08-2013:30:35
					</view>
					<view class="cr">
						-500积分
					</view>
				</view>
				<view class="c">
					<view class="clu">
						订单:291704261137926
					</view>
					<view class="clm">
						抵扣金额:50元
					</view>
					<view class="cld">
						时间:2016-08-2013:30:35
					</view>
					<view class="cr">
						-500积分
					</view>
				</view>
			</van-tab>
			<van-tab title="使用规则">
				<view class="d">
					1.积分使用规则详细积分使用规则详细积分使用规则详细积分使用规则详细
				</view>
				<view class="d">
					2.积分使用规则详细积分使用规则详细积分使用规则详细积分使用规则详细
				</view>
				<view class="d">
					3.积分使用规则详细积分使用规则详细积分使用规则详细积分使用规则详细
				</view>
				<view class="d">
					4.积分使用规则详细积分使用规则详细积分使用规则详细积分使用规则详细
				</view>
				<view class="d">
					5.积分使用规则详细积分使用规则详细积分使用规则详细积分使用规则详细
				</view>
				<view class="d">
					6.积分使用规则详细积分使用规则详细积分使用规则详细积分使用规则详细
				</view>
				<view class="d">
					7.积分使用规则详细积分使用规则详细积分使用规则详细积分使用规则详细
				</view>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.au {
		position: absolute;
		top: 86rpx;
		left: 360rpx;
		color: white;
		font-size: 60rpx;
	}

	.ad {
		position: absolute;
		top: 184rpx;
		left: 356rpx;
		color: white;
		font-size: 24rpx;
	}

	.b {
		position: relative;
		background-color: #608b8a21;
		height: 140rpx;
		width: 710rpx;
		border-radius: 20rpx;
		margin-left: 20rpx;
		margin-top: 10rpx;
	}

	.blu {
		position: absolute;
		left: 40rpx;
		top: 24rpx;
		font-size: 30rpx;

	}

	.bld {
		position: absolute;
		left: 40rpx;
		top: 80rpx;
		font-size: 24rpx;
		color: grey;
	}

	.br {
		position: absolute;
		right: 40rpx;
		top: 50rpx;
		font-size: 30rpx;
	}

	.c {
		position: relative;
		background-color: #608b8a21;
		height: 180rpx;
		width: 710rpx;
		border-radius: 20rpx;
		margin-left: 20rpx;
		margin-top: 10rpx;
	}

	.clu {
		position: absolute;
		left: 40rpx;
		top: 20rpx;
		font-size: 30rpx;

	}

	.clm {
		position: absolute;
		left: 40rpx;
		top: 70rpx;
		font-size: 30rpx;
	}

	.cld {
		position: absolute;
		left: 40rpx;
		top: 120rpx;
		font-size: 24rpx;
		color: grey;
	}

	.cr {
		position: absolute;
		right: 40rpx;
		top: 70rpx;
		font-size: 30rpx;
	}

	.d {
		/* background-color: #608b8a21; */
		height: 100rpx;
		width: 710rpx;
		border-radius: 20rpx;
		margin-left: 20rpx;
		margin-top: 10rpx;
		word-wrap: break-word;
		line-height: 40rpx;
	}
</style>
